<template>
    <div id="bigbox">
        <!-- 上面的盒子 -->
        <div id="topbox">
            <input id="inp1" type="text" placeholder="请输入用户名称" v-model="asd1"></input>
            <input id="inp1" type="text" placeholder="请输入商品名称" v-model="asd2"></input>
            <el-button @click="sousuo" :icon="Search" circle />
        </div>
        <!-- 中间的内容 -->
        <div id="middlebox">
            <table>
                <tr>
                    <th>用户名称</th>
                    <th>商品名称</th>
                    <th>店铺</th>
                </tr>
                <template v-for="item in asd">
                    <tr>
                        <td>{{item.userName}}</td>
                        <td>{{item.goodsName}}</td>
                        <div id="xuanze"><el-checkbox :value="shuju123" @input="boxadd(item)"></el-checkbox></div>
                    </tr>
                </template>
                <div class="foot">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        :page-count="total"
                        @current-change="pageChange"/>
                </div>
            </table>
        </div>
    </div>
</template>
<style scoped>
td{
    font-size: 12px;
}
 #bigbox{
    width:100%;
    height:100%;
    background-color: #F5F5F5;
}
#topbox{
    width:90%;
    height:80px;
    margin-left:5%;
    line-height:80px;
}
#inp1{
    height:30px;
    width:15%;
    margin-right:1%;
    padding-left:1%;
    border-radius: 5px;
    border:0px;
    box-shadow: 1px 3px #ccc;
    outline: none;
}
#inp2{
    height:30px;
    width:15%;
    margin-right:1%;
    padding-left:1%;
    border-radius: 5px;
    border:0px;
    box-shadow: 1px 3px #ccc;
    outline: none;
}
.el-button.is-circle {
    border-radius: 25%;
    padding: 8px;
    width: 32px;
    position: relative;
}
.el-button{
    background-color: #5981E2;
    color: #fff;
    font-size:20px;
}
table{
    width:100%;
}
th,td{
    padding-top:2%;
    width:25%;
    text-align: center;
}
#xuanze{
    padding-top:6%;
    width:25%;
    text-align: center;
    margin-left:38%;
}
#middlebox{
    width:90%;
    height:483px;
    margin-left:5%;
    background-color: #fff;
}
.foot{
    width: 75%;
    height: 10%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 41px;
}
.el-pagination{
    justify-content: center;
}
</style>
<script setup>
    import {Search} from '@element-plus/icons-vue'
    import axios from 'axios';
    import {ref,onMounted} from 'vue';
    let pageSize = 7;
    let currentPage = ref(1);
    let total = ref(1);
    var asd=ref([]);
    var asd1=ref([]);
    var asd2=ref([]);
    var shuju123=ref(false);
    const pageChange = (newPage) => {
        currentPage.value = newPage;
        sousuo();
    };
    onMounted(()=>{
        shoucang();
    })
    //调取收藏渲染接口
    function shoucang(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/collects/shopCollectsList`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
            shopId:Number(localStorage.getItem("shopId"))
        })
        .then(function(res){
            var qwe=res.data.data.collectsList;
            total=res.data.data.pageCount;
            asd.value=qwe;
            console.log(qwe);
        })
    }
    function sousuo(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/collects/shopCollectsSearch`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
            shopId:Number(localStorage.getItem("shopId")),
            userName:asd1.value,
            goodsName:asd2.value
        })
        .then(function(res){
            console.log(res);
            var qwe=res.data.data.searchList;
            total=res.data.data.pageCount;
            asd.value=qwe;
        })
    }
    function boxadd(item){
        shuju123.value=!shuju123.value
        let shuji=ref();
        if(shuju123.value){
             shuji.value=1
        }else{
            shuji.value=0
        }
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/collects/updateCollects`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
            shopId:Number(localStorage.getItem("shopId")),
            collectsId:Number(item.collectsId),
            status:shuji.value,
        })
        .then(function(res){
            console.log(res);
        })
    }
</script>